<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>WebRDP</title>

        <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/css/webrdp.css" rel="stylesheet">

    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/js/mstsc.js"></script>
    <script type="text/javascript" src="/js/keyboard.js"></script>
    <script type="text/javascript" src="/js/rle.js"></script>
    <script type="text/javascript" src="/js/client.js"></script>
    <script type="text/javascript" src="/js/canvas.js"></script>
  </head>

  <body onload='load("myCanvas")'>
    <div id="header">PLACEHOLDER</div>
    <div id="main" class="container">
    </div> <!-- /container -->
    <canvas id="myCanvas" style="display:none">
  </body>
  <script>
    var client = null;

    function load (canvas) {
        client = Mstsc.client.create(Mstsc.$(canvas));
    }

    function connect () {
        Mstsc.$("main").style.display = 'none';
        var canvas = Mstsc.$("myCanvas");
        canvas.style.display = 'inline';
        var headerOffset = document.getElementById("header");
        var yoffset = headerOffset.scrollHeight;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight - (yoffset + 5);
        client.connect( function (err) {
            Mstsc.$("myCanvas").style.display = 'none';
            Mstsc.$("main").style.display = 'inline';
        });
    }

    var socket = io.connect();
    socket.on('connect', function(data) {
        socket.emit('ready', 'Client connected...[client-side]');
        connect();
    });
</script>
</html>
